<template>
  <div class='cu-common-layout'>
    <div class='cu-common-layout-center'>
      <el-row class='cu-common-search-box' :gutter='16'>
        <el-form @submit.native.prevent>
          <el-col :span='6'>
            <el-form-item label='退款时间'>
              <el-date-picker v-model='query.time' type='datetimerange' value-format='timestamp'
                              format='yyyy-MM-dd HH:mm:ss' start-placeholder='开始日期' end-placeholder='结束日期'>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='退款方式'>
              <el-select v-model='query.method' placeholder='退款方式'>
                <el-option v-for='(item, index) in methodOptions' :key='index' :label='item.fullName'
                           :value='item.id' />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='退款类型'>
              <el-select v-model='query.type' placeholder='退款类型' clearable>
                <el-option v-for='(item, index) in typeOptions' :key='index' :label='item.fullName' :value='item.id' />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item>
              <el-button type='primary' icon='el-icon-search' @click='search()'>查询</el-button>
              <el-button icon='el-icon-refresh-right' @click='reset()'>重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class='cu-common-layout-main cu-flex-main'>
        <div class='cu-common-head'>
          <div>
            <el-button type='primary' icon='el-icon-plus' @click='addOrUpdateHandle()'>新增</el-button>
            <el-button type="text" icon="el-icon-download" @click="exportData()" >导出</el-button>
          </div>
          <div class='cu-common-head-right'>
            <el-tooltip effect='dark' content='刷新' placement='top'>
              <el-link icon='icon-ym icon-ym-Refresh cu-common-head-icon' :underline='false' @click='reset()' />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <custom-table v-loading='listLoading' :data='list'>
          <el-table-column label='订单编号' prop='id' align='left' />
          <el-table-column label='客户名称' prop='name' align='left' />
          <el-table-column label='校区名称' prop='campusName' align='left' />
          <el-table-column label='款项类型' prop='status' align='left'>
            <template slot-scope='scope'>{{ scope.row.method | dynamicText(statusOptions) }}</template>
          </el-table-column>
          <el-table-column label='收款品牌' prop='brand' align='left'>
            <template slot-scope="scope">{{ scope.row.brand | dynamicCodeText(brandOptions) }}</template>
          </el-table-column>
          <el-table-column label='退款类型' prop='type' align='left'>
            <template slot-scope='scope'>{{ scope.row.type | dynamicText(typeOptions) }}</template>
          </el-table-column>
          <el-table-column label='退款方式' prop='method' align='left'>
            <template slot-scope='scope'>{{ scope.row.method | dynamicText(methodOptions) }}</template>
          </el-table-column>
          <el-table-column label='退款金额' prop='amount' align='left' />
          <el-table-column label='退款时间' prop='time' :formatter="custom.tableDateTimeFormat" align='left' />
          <el-table-column label='退款原因' prop='reason' align='left' />
<!--          { prop: 'id', label: '订单编号' },
          { prop: 'name', label: '客户名称' },
          { prop: 'campusName', label: '校区名称' },
          { prop: 'status', label: '款项类型' },
          { prop: 'brand', label: '收款品牌' },
          { prop: 'type', label: '退款类型' },
          { prop: 'method', label: '退款方式' },
          { prop: 'amount', label: '退款金额' },
          { prop: 'time', label: '退款时间' },
          { prop: 'reason', label: '退款原因' }-->
<!--          <el-table-column prop='time' label='退款时间'  :formatter="custom.tableDateTimeFormat" align='left' />
          <el-table-column label='退款方式' prop='method' align='left'>
            <template slot-scope='scope'>{{ scope.row.method | dynamicText(methodOptions) }}</template>
          </el-table-column>
          <el-table-column prop='amount' label='退款金额' align='left' />
          <el-table-column label='退款类型' prop='type' align='left'>
            <template slot-scope='scope'>{{ scope.row.type | dynamicText(typeOptions) }}</template>
          </el-table-column>
          <el-table-column prop='reason' label='退款原因' align='left' />
          <el-table-column prop='bankName' label='开户行' align='left' />
          <el-table-column prop='accountHolder' label='开户人' align='left' />
          <el-table-column prop='bankAccount' label='银行帐号' align='left' />
          <el-table-column prop='otherAccount' label='其他帐号' align='left' />-->
          <el-table-column label='操作' fixed='right' width='100'>
            <template slot-scope='scope'>
              <el-button type='text' @click='addOrUpdateHandle(scope.row.id)'>编辑</el-button>
              <el-button type='text' @click='handleDel(scope.row.id)' class='Manage-table-delBtn'>删除</el-button>
            </template>
          </el-table-column>
        </custom-table>
        <pagination :total='total' :page.sync='listQuery.currentPage' :limit.sync='listQuery.pageSize'
                    @pagination='initData' />
      </div>
    </div>
    <custom-form v-if='formVisible' ref='CustomForm' @refresh='refresh' />
    <ExportBox v-if='exportBoxVisible' ref='ExportBox' @download='download' />
  </div>
</template>
<script>
export { default } from './index.js'
</script>
